<template>
    <div class="login-box">
        <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px"
                 class="demo-loginForm">
            <el-form-item label="用户账号：" prop="userName">
                <el-input v-model.number="loginForm.userName"></el-input>
            </el-form-item>

            <el-form-item label="用户密码：" prop="password">
                <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
                <el-button @click="resetForm('loginForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {Message} from "element-ui";

export default {
    name: "LoginView",
    data() {
        let validateName = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入用户名'));
            } else {
                callback();
            }
        };
        let validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {

                callback();
            }
        };

        return {
            loginForm: {
                userName: '',
                password: ''
            },
            rules: {
                userName: [
                    {validator: validateName, trigger: 'blur'}
                ],
                password: [
                    {validator: validatePass, trigger: 'blur'}
                ]

            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //验证通过
                    console.log("--- 确定登录 ----")
                    // 使用axios来提交数据
                    let url = "/api/login";
                    // 这种方式传参：就是普通的传参方式：
                    let params = new URLSearchParams();
                    params.append("userName",this.loginForm.userName);
                    params.append("password",this.loginForm.password);

                    // 这种传参方式：传过去的是json对象。后端应该使用@RequestBody注解
                    //{
                    // userName: this.loginForm.userName,
                    //     password: this.loginForm.password
                    // }

                    this.$axios.post(url, params )
                        .then((res)=>{
                            console.log(res);

                            if(res.data.code == 200){
                                Message({
                                    type: "success",
                                    message: res.data.message,
                                    duration: 1000
                                })
                                // 登录成功之后，得到后端返回的token
                                let token = res.headers['authentication'];

                                console.log("前端得到的token:"+token);
                                // 把token存在本地缓存里
                                sessionStorage.setItem("token",token);
                                sessionStorage.setItem("loginName",this.loginForm.userName);

                                // 以前的跳转方式：
                                // location.href = "???";
                                // 现在使用路由跳转、
                                this.$router.push("/welcome")
                            }
                        })


                } else {
                    console.log('error submit!!');

                    // this.$message.error('错了哦，这是一条错误消息');
                    Message({
                        type: "error",
                        message: "对不起，请正确填写数据",
                        duration: 1000
                    })
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style scoped>

</style>
